// Context.Provider useContext
// App -> A -> B

import { createContext, useContext } from "react";


const MsgContext = createContext()

// A组件
function A() {
  return (
    <div className="A">
      <B></B>
    </div>
  );
}

// B组件
function B() {

  const msg = useContext(MsgContext)

  return (
    <div className="B">
      B MSG: {msg}
    </div>
  );
}


// App组件
function App() {

  const msg = "this app msg"


  return (
    <div className="App">
      <MsgContext.Provider value={msg}>
        this is App
        <A></A>
      </MsgContext.Provider>
    </div>
  );
}

export default App;
